<template>
	<div class="zong">
		<!-- 上边两个图表 -->
		<div class="top">
			<div class="lefttop">
				<div class="title">工单数量</div>
				<!-- 选择框，输入框 -->
				<div class="block">
					<el-select
						v-model="work"
						@change="a"
						class="xz"
						placeholder="请选择"
						size="small"
					>
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
					<el-date-picker
						v-model="worktime"
						value-format="YYYY-MM-DD"
						type="daterange"
						@change="a"
						style="width: 250px; height: 23px; margin-left: 10px"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
					/>
				</div>
				<!-- 左侧文字 -->
				<div class="left">
					<p>
						今年
						<span style="font-size: 20px; color: #277bcb">128</span>
						次
					</p>
					<p>
						本月
						<span style="font-size: 20px; color: #277bcb">15</span
						>次
					</p>
					<p>
						昨日
						<span style="font-size: 20px; color: #277bcb">8</span>次
					</p>
				</div>
				<!-- 绘制图表 -->
				<div
					id="a"
					style="
						height: 260px;
						width: 600px;
						margin-left: 160px;
						margin-top: -191px;
					"
				></div>
			</div>
			<div class="lefttop" style="margin-left: 20px">
				<div class="title">故障数量分布</div>
				<!-- 绘制图表 -->
				<div id="b" style="height: 300px; width: 700px"></div>
			</div>
		</div>
		<!-- 下边两个图表 -->
		<div class="top" style="margin-top: 20px">
			<div class="lefttop">
				<div class="title">风险严重程度统计</div>
				<div style="display: flex">
					<div>
						<!-- 绘制图表饼形图 -->
						<div id="c" style="height: 230px; width: 260px"></div>
					</div>
					<div>
						<div class="risk">
							<!-- 绘制图表折线图 -->
							<el-date-picker
								v-model="risk"
								type="daterange"
								style="width: 200px; height: 23px"
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
							/>
						</div>
						<div
							id="c1"
							style="
								height: 250px;
								width: 420px;
								margin-top: -1px;
							"
						></div>
					</div>
				</div>
			</div>
			<div class="lefttop" style="margin-left: 20px">
				<div class="title">故障率趋势</div>
				<div class="trend" style="left: 320px">
					<el-date-picker
						v-model="trend"
						type="daterange"
						style="width: 250px; height: 23px; margin-left: 140px"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
					/>
				</div>
				<!-- 绘制图表 -->
				<div
					id="d"
					style="height: 230px; width: 600px; margin-left: 20px"
				></div>
			</div>
		</div>
		<!-- 最下边一个图表 -->
		<div class="lefttop" style="margin-top: 20px; height: 320px">
			<div class="title">预防性维护占比</div>
			<div class="trend">
				<el-date-picker
					v-model="maintain"
					@change="e"
					type="monthrange"
					align="right"
					style="width: 250px; height: 23px"
					unlink-panels
					range-separator="至"
					start-placeholder="开始月份"
					end-placeholder="结束月份"
				>
				</el-date-picker>
			</div>
			<!-- 绘制图表 -->
			<div id="e" style="height: 80%; width: 80%"></div>
		</div>
		<!-- <button @click="reactYear">111</button> -->
	</div>
</template>
<script>
import { ref, reactive, onMounted, onBeforeUpdate } from "vue";
import * as echarts from "echarts";
import { ProjectGroupone, Scalar } from "@/api/model/echarts";
export default {
	setup() {
		const work = ref("");
		const trend = ref("");
		const maintain = ref("");
		const risk = ref("");
		const worktime = ref("请选择");

		const options = reactive([
			{
				value: "所有",
				label: "所有",
			},
			{
				value: "冷冻机",
				label: "冷冻机",
			},
			{
				value: "冷冻泵",
				label: "冷冻泵",
			},
			{
				value: "冷却泵",
				label: "冷却泵",
			},
			{
				value: "冷却塔",
				label: "冷却塔",
			},
			{
				value: "BA",
				label: "BA",
			},
		]);
		let state = reactive({
			asd: [
				["product", "2019", "2020", "2021", "2022"],
				["制冷机", 1, 1, 1, 1],
				["冷却泵", 1, 1, 1, 1],
				["冷冻泵", 1, 1, 1, 1],
				["冷却塔", 1, 1, 1, 1],
			],
			asd1: [
				["product", "2019", "2020", "2021", "2022"],
				["制冷机", 43, 85, 93, 85],
				["冷却泵", 83, 73, 55, 85],
				["冷冻泵", 86, 65, 82, 85],
				["冷却塔", 72, 53, 39, 85],
			],
			shuju: [["product", "2019", "2020", "2021", "2022"]],
			b: {
				indicatorName: "故障数量分布",
				firstType: "数据分析",
				secondType: "",
				thirdType: "",
				type: "year",
				dataType: "year",
				dayFrom: "1900-01-01",
				dayTo: "2023-01-02",
			},
			d: {
				indicatorName: "故障率趋势",
				firstType: "数据分析",
				secondType: "",
				type: "year",
				thirdType: "",
				dataType: "year",
				dayFrom: "1900-01-01",
				dayTo: "2023-01-02",
			},
		});
		async function a(e) {
			console.log(typeof e);
			console.log(worktime.value);
			// 基于准备好的dom，初始化echarts实例
			let o = "";
			let datato = "1900-01-01";
			let datafrom = "2023-01-02";
			if (typeof e == "object") {
				console.log(e[0]);
				datato = worktime.value[0];
				datafrom = worktime.value[1];
			} else {
				if (e === "所有") {
					o = "";
				} else {
					o = e;
				}
			}
			let myChart = echarts.init(document.getElementById("a"));
			let res = await ProjectGroupone({
				indicatorName: "工单数量",
				firstType: "数据分析",
				secondType: o,
				type: "day",
				thirdType: "",
				dataType: "day",
				dayFrom: datato,
				dayTo: datafrom,
			});
			work.value = "";
			worktime.value = "";
			let a = [];
			let b = [];
			let c = [];
			res.data.commonDailyDataList.forEach((item) => {
				b.push(item.number1);
				a.push(
					`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`
				);
				a = [...new Set(a)];
			});
			res.data.commonDailyDataList.forEach((item) => {
				c.push(item.number2);
			});
			myChart.setOption({
				legend: {
					left: 20,
					icon:'rect',
			itemWidth: 20,
				itemHeight: 1,
					orient: "horizontal",
					data: ["工单", "数量"],
				},
				xAxis: {
					type: "category",
					data: a,
				},
				yAxis: {
					type: "value",
				},
				series: [
					{
						name: "工单",
						type: "line",
						// data: ["12", "14", "10", "14", "10", "12", "13", "8", "11", "10", "11", "13",],
						data: b,
						// 线条覆盖颜色
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 0,
											color: "#fdf1ce",
										},
										{
											offset: 1,
											color: "#dae3d3",
										},
									],
									false
								),
							},
						},
						// 线条颜色
						itemStyle: {
							normal: {
								color: "#f7b851",
							},
						},
						// 线条宽度
						lineStyle: {
							normal: {
								width: 3,
							},
						},
					},
					{
						name: "数量",
						type: "line",
						data: c,
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 0,
											color: "#d8e9f5",
										},
										{
											offset: 1,
											color: "#d8e9f5",
										},
									],
									false
								),
							},
						},
						itemStyle: {
							normal: {
								color: "#479bd0",
							},
						},
						lineStyle: {
							normal: {
								width: 3,
							},
						},
					},
				],
			});
		}
		async function b() {
			let res = await ProjectGroupone(state.b);
			console.log(res, "故障");
			let data1 = [];
			let arr1 = [];
			let arr2 = [];
			let arr3 = [];
			let arr4 = [];
			let da = [];
			res.data.indicatorList.forEach((item) => {
				da.push(item.secondType);
			});
			res.data.commonDailyDataList.forEach((item) => {
				data1.push(`${item.day.substring(0, 4)}`);
				if (item.type == "type1") {
					arr1.push(item.number1);
				} else if (item.type == "type2") {
					arr2.push(item.number1);
				} else if (item.type == "type3") {
					arr3.push(item.number1);
					arr4.push(item.number1);
				} else if (item.type == "type3") {
					arr4.push(item.number1);
				}
			});
			let shuju = [["product", "2019", "2020", "2021", "2022"]];
			let a = da.splice(0, 4);
			console.log(a);

			let data = da.splice(0, 3);
			console.log(data);

			let arrays = [
				arr1.splice(0, 4),
				arr2.splice(0, 4),
				arr3.splice(0, 4),
				arr4.splice(0, 4),
			];
			console.log(arrays);
			for (var i = 0; i < a.length; i++) {
				shuju.push([a[i], ...arrays[i]]);
			}
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById("b"));
			myChart.setOption({
				legend: {
					icon:'rect',
			itemWidth: 20,
				itemHeight: 1,	
				},
				tooltip: {},
				dataset: {
					source: shuju,
				},
				xAxis: {
					type: "category",
					// data: ['']
				},
				yAxis: {},
				series: [
					{ type: "bar", color: "#90cd50" },
					{ type: "bar", color: "#ffc000" },
					{ type: "bar", color: "#d6ebfa" },
					{ type: "bar", color: "#0070c0" },
				],
			});
		}
		async function c() {
			let datato = "1900-01-01";
			let datafrom = "2023-01-02";
			let w = ["低", "中", "高"];
			let di = 0;
			let zhong = 0;
			let gao = 0;
			let a = [];
			let type1 = [];
			let type2 = [];
			let type3 = [];
			w.forEach(async (item) => {
				let res = await Scalar({
					indicatorName: "风险严重程度统计",
					firstType: item,
					secondType: "",
					thirdType: "",
					dataType: "scalar",
					dayFrom: datato,
					dayTo: datafrom,
				});
				console.log(res, "低中高");
				if (res.data.scalarList[0].type == "低") {
					console.log(res.data.scalarList[0].data);
					di = res.data.scalarList[0].data;
				}
				if (res.data.scalarList[0].type == "中") {
					zhong = res.data.scalarList[0].data;
				}
				if (res.data.scalarList[0].type == "高") {
					gao = res.data.scalarList[0].data;
				}
			});
			let myChart = echarts.init(document.getElementById("c"));
			let res = await ProjectGroupone({
				indicatorName: "风险严重程度统计",
				firstType: "数据分析",
				secondType: "",
				thirdType: "",
				dataType: "day",
				dayFrom: datato,
				dayTo: datafrom,
			});
			console.log(res, "qqqqqqqqqqqqqq");
			res.data.commonDailyDataList.forEach((item) => {
				if (item.type == "type1") {
					type1.push(item.number1);
				}
				if (item.type == "type2") {
					type2.push(item.number1);
				}
				if (item.type == "type3") {
					type3.push(item.number1);
				}
				a.push(
					`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`
				);
				a = [...new Set(a)];
			});

			myChart.setOption({
				tooltip: {
					trigger: "item",
				},
				legend: {
					data: ["高", "中", "低"],
					left: "center",
					top: "bottom",
					icon:'rect',
			itemWidth: 20,
				itemHeight: 1,
				},
				series: [
					{
						name: "Access From",
						type: "pie",
						radius: "50%",
						data: [
							{ value: gao, name: "高" },
							{ value: zhong, name: "中" },
							{ value: di, name: "低" },
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: "rgba(0, 0, 0, 0.5)",
							},
						},
					},
				],
			});

			// 基于准备好的dom，初始化echarts实例
			let myChart1 = echarts.init(document.getElementById("c1"));
			myChart1.setOption({
				legend: {
					icon:'rect',
			itemWidth: 20,
				itemHeight: 1,
					left: 20,
					orient: "horizontal",
					data: ["高", "中", "低"],
				},
				xAxis: {
					type: "category",
					data: a,
					axisLabel: {
						rotate: 45,
					},
				},
				yAxis: {
					type: "value",
				},
				series: [
					{
						name: "高",
						data: type1,
						type: "line",
					},
					{
						name: "中",
						data: type2,
						type: "line",
					},
					{
						name: "低",
						data: type3,
						type: "line",
					},
				],
			});
		}
		async function d() {
			let datato = "1900-01-01";
			let datafrom = "2023-01-02";
			let a = [];
			let b = [];
			let c = [];
			let d = [];
			let e = [];
			if (typeof e == Object) {
				datato = e[0].substring(0, 4);
				datafrom = e[1].substring(0, 4);
			}

			let res = await ProjectGroupone({
				indicatorName: "故障率趋势",
				firstType: "数据分析",
				secondType: "",
				thirdType: "",
				dataType: "day",
				dayFrom: datato,
				dayTo: datafrom,
			});
			console.log(res, "故障律");
			res.data.commonDailyDataList.forEach((item) => {
				a.push(
					`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`
				);
				a = [...new Set(a)];
				b.push(item.number1);
				if (item.type == "type1") {
					c.push(item.number1);
				}
				if (item.type == "type2") {
					d.push(item.number1);
				}
				if (item.type == "type3") {
					e.push(item.number1);
				}
			});
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById("d"));
			myChart.setOption({
				legend: {
					icon:'rect',
			itemWidth: 20,
				itemHeight: 1,
					left: 50,
					data: ["所有", "冷冻机", "冷冻泵", "冷却泵", "冷却塔"],
				},
				grid: {
					left: "3%",
					right: "4%",
					bottom: "3%",
					containLabel: true,
				},
				xAxis: {
					type: "category",
					boundaryGap: false,
					data: a,
				},
				yAxis: {
					type: "value",
				},
				series: [
					{
						name: "所有",
						type: "line",
						stack: "Total",
						data: b,
					},
					{
						name: "冷冻机",
						type: "line",
						stack: "Total",
						data: c,
					},
					{
						name: "冷冻泵",
						type: "line",
						stack: "Total",
						data: d,
					},
					{
						name: "冷却泵",
						type: "line",
						stack: "Total",
						data: e,
					},
					{
						name: "冷却塔",
						type: "line",
						stack: "Total",
						data: [
							820, 932, 901, 934, 1290, 1330, 1320, 122, 322,
							1231, 213, 231,
						],
					},
				],
			});
		}
		async function e(e) {
			console.log(e, "ccccccccccccccccccccccccccccc");
			let datato = "1900-01-01";
			let datafrom = "2023-01-02";
			let a = [];
			let b = [];
			if (typeof e == Object) {
				datato = e[0].substring(0, 4);
				datafrom = e[1].substring(0, 4);
			}

			let res = await ProjectGroupone({
				indicatorName: "预防性维护占比",
				firstType: "数据分析",
				secondType: "",
				thirdType: "",
				dataType: "day",
				dayFrom: datato,
				dayTo: datafrom,
			});
			res.data.commonDailyDataList.forEach((item) => {
				a.push(
					`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`
				);
				a = [...new Set(a)];
				b.push(item.number1);
			});

			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById("e"));
			myChart.setOption({
				xAxis: {
					type: "category",
					data: a,
					axisLabel: {
						rotate: 45,
					},
				},
				yAxis: {
					type: "value",
				},
				series: [
					{
						data: b,
						type: "line",
					},
				],
			});
		}
		// 获取前12月月份函数
		function reactYear() {
			var d = new Date();
			var result = [];
			for (var i = 0; i < 12; i++) {
				d.setMonth(d.getMonth() - 1);
				var m = d.getMonth();
				m = m < 10 ? "0" + m : m;
				//在这里可以自定义输出的日期格式
				//					result.push(d.getFullYear() + "-" + m);
				result.push(d.getFullYear() + "." + m);
			}
			console.log(result, 2222222222);
			return result;
		}
		onMounted(() => {
			
			a(),b(), c(),d(),   e();
		});
		onBeforeUpdate(() => {});
		return {
			work,
			trend,
			maintain,
			risk,
			worktime,
			options,
			a,
			b,
			c,
			d,
			e,
			reactYear,
		};
	},
};
</script>

<style scoped>
.block {
	display: flex;
	margin-left: 200px;
	margin-top: 15px;
}

.top {
	display: flex;
}

.risk {
	position: relative;
	top: 20px;
	left: 200px;
}

.zong {
	/* background-color: #e5edf7; */
	height: 1000px;
	width: 100%;
}

.trend {
	position: relative;
	width: 250px;
	left: 450px;
	top: 25px;
}

.left p {
	font-size: 12px;
	margin-top: 30px;
}

.lefttop {
	width: 49%;
	/* width: 750px; */
	height: 300px;
	background-color: white;
	border-radius: 20px;
}

.left {
	position: relative;
	left: 30px;
	top: 10px;
}

.title {
	font-size: 18px;
	font-weight: 550;
	color: #4d62a5;
	padding-left: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid #f2f3f8;
}

.xz {
	width: 100px;
	background: #c0cfe3;
	margin-left: 130px;
	border-radius: 10px;
	color: #c0cfe3;
}
</style>
